<template>
  <ElementDialog
    :title="file.filename"
    :body-padding="false"
    v-bind="$attrs"
    :visible="visible"
    height="60vh"
    show-full-screen
    embed
    v-on="$listeners">
    <template #default>
      <VueVideoPlayer ref="videoPlayer" class="video-player-box" :src="src" :playsinline="true" />
    </template>
  </ElementDialog>
</template>

<script>
  import { toFileUrl } from '@/util/core'

  export default {
    name: 'FileViewer',
    props: {
      visible: Boolean,
      file: Object
    },
    computed: {
      src() {
        return toFileUrl(this.file)
      },
      player() {
        return this.$refs.videoPlayer.player
      }
    }
  }
</script>
